<template>
	<!-- 底部的点赞、评论、分享 -->
	<view class="article_footer page_pad page_bg">

		<view class="article_footer_item">
			<image class="article_footer_opt_img" src="/static/icon/share.png"></image>
			<text class="article_footer_txt">分享</text>
		</view>


		<view class="article_footer_item"  @click.stop="replyCilck">
			<image class="article_footer_opt_img" src="/static/icon/reply.png"></image>
			<text class="article_footer_txt">{{data.replyCount>0?data.replyCount:'评论'}}</text>
		</view>


		<view class="article_footer_item">
			<!-- 赞 -->
			<image v-if="data.likeOrDis===1"  @click.stop="cancelLike('like')"
				class="article_footer_opt_img" src="/static/icon/liked.png"></image>
			<image v-else  @click.stop="like('like')" 
				class="article_footer_opt_img" src="/static/icon/unlike.png"></image>	
							
			<text class="article_footer_opt_txt">{{data.likeCount}}</text>
				
			<!-- 踩 -->				
			<image v-if="data.likeOrDis===-1" @click.stop="cancelLike('dislike')"
				class="article_footer_opt_img" src="/static/icon/disliked.png"></image>
			<image v-else  @click.stop="like('dislike')"   
				class="article_footer_opt_img" src="/static/icon/undislike.png"></image>					
		</view>

	
	</view>
</template>

<script>
	export default {
		name: "footerInfo",
		props: {
			// 数据对象
			data: {
				type: Object,
				default () {
					return {
						id: '',
						commentCount: '',
						likeOrDis: '',
						likeCount: '',
					}
				}
			},
			// 点击评论是否需要跳转详情
			reply2Info: {
				type: Boolean,
				default () {
					return false
				}
			},
		},
		data() {
			return {
				// 提交中
				submiting: false
			}
		},
		computed: {
			hasLogin() {
				return this.$authUtil.isLoginedin()
			}	
		},
		methods: {
			// 点击评论
			replyCilck(){
				this.$emit('replyEvent')
			},
			// 赞或踩
			like(type) {
				if(this.submiting || !this.hasLogin){
					return
				}
				this.submiting = true
				let url = null;
				if (this.data.likeOrDis !==-1 && type === 'dislike'){
					// 踩
					url = 'user/dislike/article/'
				} else if (this.data.likeOrDis !==1 && type === 'like'){
					// 赞
					url = 'user/like/article/';
				}
				if (url == null){
					return false
				}
				this.$httpApi.baseLikePost(url + this.data.id, {}).then(({data}) => {
					if (data.code == "000000") {
						if (this.data.likeOrDis !==-1 && type === 'dislike'){
							this.data.likeCount = this.data.likeCount + (this.data.likeOrDis == 1?-2:-1)
							this.data.likeOrDis = -1;
						} else if (this.data.likeOrDis !==1 && type === 'like'){
							this.data.likeCount = this.data.likeCount + (this.data.likeOrDis == -1?2:1)
							this.data.likeOrDis = 1;
						}
					}
					this.submiting  = false
				}).catch(err => {
					this.submiting  = false
				})
			},
			// 取消赞或踩
			cancelLike(type) {
				if(this.submiting || !this.hasLogin){
					return
				}
				this.submiting = true
				let url = null;
				// 取消踩
				if (this.data.likeOrDis ===-1 && type === 'dislike'){					
					url = 'user/dislike/article/';
				} else if (this.data.likeOrDis ===1 && type === 'like'){
					// 取消赞
					url = 'user/like/article/';
				}
				if (url == null){
					return false
				}
				this.$httpApi.baseLikeDelete(url + this.data.id, {}).then(({data}) => {
					if (data.code == "000000") {
						if (this.data.likeOrDis ===-1 && type === 'dislike'){
							this.data.likeCount = this.data.likeCount + 1
						} else if (this.data.likeOrDis ===1 && type === 'like'){
							this.data.likeCount = this.data.likeCount - 1
						}
						this.data.likeOrDis = null
						this.submiting  = false
					}
				}).catch(err => {
					this.submiting  = false
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	// 文章底部赞、评论等
	.article_footer {
		display: flex;
		flex: 1;
		flex-direction: row;
		flex-wrap: wrap;
		padding-top: 6px;
		padding-bottom: 10px;
	}

	.article_footer_item {
		display: flex;
		width: calc((100%) / 3);
		justify-content: center;
		margin: auto;
	}

	// 点赞、评论等图标
	.article_footer_opt_img {
		width: 18px;
		height: 18px;
		position: relative;
		text-align: center;
	}
	// 点赞、评论等数量
	.article_footer_txt {
		margin-left: 15px;
		text-align: left;
		line-height: 18px;
		font-size: 13px;
		color: #43484D;
		width: 70px;
	}

	// 点赞、评论等数量
	.article_footer_opt_txt {
		text-align: center;
		line-height: 18px;
		font-size: 13px;
		color: #43484D;
		width: 70px;
	}
</style>
